<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <base th:href="@{/}">
  <meta charset="UTF-8">
  <title>退换货订单列表</title>
  <!-- 加载Vue框架的库文件 -->
  <script src="js/vue.js"></script>
  <!-- 加载Axios框架的库文件 -->
  <script src="js/axios.js"></script>
  <!-- 加载jQuery的库文件 -->
  <script src="js/jquery-3.6.0.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 导入外部css文件 -->
  <link rel="stylesheet" href="css/exchange.css">
</head>

<body>
  <!-- 最上方logo -->
  <div id="app">
    <div id="top">
      <div id="logo">
        <p>
          <span>禧创OCP</span>
        </p>
        <p>
          <span>全渠道数字平台</span>
        </p>
      </div>
      <div id="exit">
        <!-- 下拉餐单 -->
        <div style=" position: absolute;top: 0px;right: 30px;">
          <el-dropdown>
            <span class="el-dropdown-link" style="color: white;">
              <i class="el-icon-user-solid">admin</i>
            </span>
            <!-- 后续连数据库 -->
            <el-dropdown-menu trigger="click">
              <el-dropdown-item>水热事业部</el-dropdown-item>
              <el-dropdown-item>厨电事业部</el-dropdown-item>
              <el-dropdown-item>热能事业部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-link icon="el-icon-switch-button" style="color: white; position: absolute;top: 10px;right:3px"
          href="http://localhost:8088/login"></el-link>
      </div>
    </div>
    <!-- 上方导航栏 -->
    <div id="nav">
      <!-- 上方导航栏 -->
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <!-- <el-menu-item index="1"><a href="http://localhost:8088/homepage">首页</a></el-menu-item> -->
        <el-menu-item index="1"><a href="./homepage.html">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="ChangeGoodsApply.html">申请退换货</a></el-menu-item>
        <el-menu-item index="3"><a href="exchange.html">退换货订单列表</a></el-menu-item>
      </el-menu>

    </div>
    <!-- 侧边导航栏 -->
    <div id="left">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#989494" text-color="white">
        <el-submenu index="1">
          <template slot="title">
            <span>订单管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">提交订单</el-menu-item>
            <el-menu-item index="1-2">待处理订单</el-menu-item>
            <el-menu-item index="1-3">采购订单</el-menu-item>
            <el-menu-item index="1-4">零售订单列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <span>售后管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1"><a href="ChangeGoodsApply.html">退换货申请</a></el-menu-item>
            <el-menu-item index="2-2"><a href="exchange.html">退换货订单列表</a></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <span>产品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">产品信息查询</el-menu-item>
            <el-menu-item index="3-2">库存信息管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <span>会员信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1"><a href="information.html">会员信息</a></el-menu-item>
            <el-menu-item index="4-2"><a href="motifyPass.html">修改密码</a></el-menu-item>
            <el-menu-item index="4-3"><a href="AccountMeaasge.html">账号信息</a></el-menu-item>
            <el-menu-item index="4-4"><a href="subAccount.html">子账号管理</a></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <span>设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">网店设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <!-- 会员名称等信息动态查询 -->
    <div id="sel">
      会员名称：
      <el-input v-model="ruleForm.name" placeholder="请输入内容" size="small" style="width: 160px;"></el-input>
      退换货订单编号：
      <el-input v-model="ruleForm.number" placeholder="请输入内容" size="small" style="width: 145px;"></el-input>
      <el-form :model="ruleForm" size="small" label-width="140px" class="demo-ruleForm">
        <el-form-item label="提交退换货日期：">
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 130px;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <span id="span1">
            <el-col class="line" :span="2">至</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2" style="width: 130px;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </span>
        </el-form-item>
      </el-form>
      <div id="line2">
        经销商账号：
        <el-input v-model="ruleForm.account" placeholder="请输入内容" size="small" style="width: 145px;"></el-input>
        原销售单来源单号：
        <el-input v-model="ruleForm.rsale" placeholder="请输入内容" size="small" style="width: 130px;"></el-input>
        仓库名称：
        <el-input v-model="ruleForm.warehouse" placeholder="请输入内容" size="small" style="width: 180px;">
        </el-input>
      </div>
      <div id="line3">
        快递公司：
        <el-input v-model="ruleForm.company" placeholder="请输入内容" size="small" style="width: 160px;"></el-input>
        快递单号：
        <el-input v-model="ruleForm.expressno" placeholder="请输入内容" size="small" style="width: 195px;">
        </el-input>
        退货原因：
        <el-input v-model="ruleForm.reason" placeholder="请输入内容" size="small" style="width: 180px;"></el-input>
      </div>
      <div id="line4">
        <!-- 订单状态：
                    <el-input v-model="ruleForm.input" placeholder="请输入内容" size="small" style="width: 160px;"></el-input> -->
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline" size="small">
          <el-form-item label="订单状态：">
            <el-select v-model="ruleForm.input" placeholder="请输入内容">
              <el-option label="待审核"></el-option>
              <el-option label="待收货"></el-option>
              <el-option label="待结算"></el-option>
              <el-option label="已完成"></el-option>
              <el-option label="已作废"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 查询、重置功能 -->
    <div id="function">
      <el-row>
        <el-button type="danger" class="el-icon-user-solid" @click="submitForm('ruleForm')">查询</el-button>
        <el-button type="danger" class="el-icon-user-solid" @click="resetForm('ruleForm')">重置</el-button>
      </el-row>
    </div>
    <!-- 表格 -->
    <div id="form">
      <template>
        <el-table :data="tableData" border height="340px" style="border:1px solid darkgrey;margin-left: 20px"
          size="mini" :fit="false" :header-cell-style="{background:'#979494',color:'#fff'}">
          <el-table-column type="selection"></el-table-column>
          <el-table-column type="index" label="序号" align="center" width="50px"></el-table-column>
          <el-table-column prop="type" label="订单类型" align="center" width="90px"></el-table-column>
          <el-table-column prop="number" label="退换货订单编号" align="center" width="90px"></el-table-column>
          <el-table-column prop="date" label="提交退换货日期" align="center" width="90px"></el-table-column>
          <el-table-column prop="rnumber" label="原销售订单号" align="center" width="90px"></el-table-column>
          <el-table-column prop="recovery" label="应恢复贷款金额" align="center" width="90px"></el-table-column>
          <el-table-column prop="state" label="订单状态" align="center" width="90px"></el-table-column>
          <el-table-column prop="mode" label="退货方式" align="center" width="90px"></el-table-column>
          <el-table-column prop="name" label="会员名称" align="center" width="90px"></el-table-column>
          <el-table-column prop="rname" label="原发货仓库名称" align="center" width="90px"></el-table-column>
          <el-table-column prop="return" label="退回仓库" align="center" width="90px"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="40"
            layout="sizes, prev, pager, next, jumper" :total="1000">
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</body>
<script type="module">
  let vm = new Vue({
    el: '#app',
    data() {
      return {
        activeIndex: '3',
        ruleForm: {
          name: '',
          number: '',
          date1: '',
          date2: '',
          account: '',
          rsale: '',
          warehouse: '',
          company: '',
          expressno: '',
          reason: '',
          input: '',
        },
        activeIndex2: '5',
        tableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        //分页功能
        currentPage4: 4,
      };
    },
    methods: {
      // 查询功能
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 重置功能
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleClick(row) {
        console.log(row);
      },
      //分页功能
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    }
  });
</script>

</html>